<template>
  <div class="circle-progress">
    <svg :viewBox="viewBox">
      <defs>
        <linearGradient id="gradient" gradientTransform="rotate(90)">
          <stop stop-color="#76B3FF" />
          <stop offset="0.45" stop-color="#7DBFFF" />
          <stop offset="1" stop-color="#84CBFF" />
          <stop offset="0%" stop-color="#76B3FF" />
          <stop offset="46.98%" stop-color="#7DBFFF" />
          <stop offset="93.18%" stop-color="#84CBFF" />
        </linearGradient>
      </defs>
      <circle
        :cx="centerX"
        :cy="centerY"
        :r="46"
        stroke="#FAFAFE"
        :stroke-width="10"
        fill="none"
      />
      <circle
        :cx="centerX"
        :cy="centerY"
        :r="outerRadius"
        :stroke="strokeBg"
        :stroke-width="strokeWidth"
        fill="none"
      />
      <circle
        :cx="centerX"
        :cy="centerY"
        :r="outerRadius"
        :stroke-dasharray="dashArray"
        :stroke-dashoffset="dashOffset"
        :stroke="progressColor"
        :stroke-width="strokeWidth"
        fill="none"
        stroke-linecap="round"
        :style="{ transition: 'stroke-dashoffset 0.5s ease-in-out' }"
      />
    </svg>
    <span class="text" :textColor="{ color: textColor }"
      >{{ progressValue }}%</span
    >
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  strokeWidth: {
    type: Number,
    default: 12
  },
  outerRadius: {
    type: Number,
    default: 37
  },
  textColor: {
    type: String,
    default: '#333'
  },
  viewBox: {
    type: String,
    default: '0 0 100 100'
  },
  centerX: {
    type: Number,
    default: 50
  },
  centerY: {
    type: Number,
    default: 50
  },
  progress: {
    type: Number,
    default: 50
  },
  strokeBg: {
    type: String,
    default: '#F3F5FB'
  }
})

const progressColor = ref('url(#gradient)')
const dashArray = computed(() => {
  return 2 * Math.PI * props.outerRadius
})

const dashOffset = computed(() => {
  return ((100 - props.progress) / 100) * dashArray.value
})

const progressValue = computed(() => {
  return props.progress
})
</script>

<style lang="less" scoped>
.circle-progress {
  position: relative;
  width: 100%;
  transform: rotate(-90deg);

  svg {
    background: #fff;
    width: 100%;
  }

  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: 16px;
    font-weight: 700;
    color: @color-brand-regular;
  }
}
</style>
